<template>
    <div class="w-full h-full">
        <template v-for="item in chatList" :key="item">
            <!-- gpt -->
            <div v-if="item.type == 'robot'"
                class="w-full border-0 border-b border-solid border-black/10 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group bg-gray-50 dark:bg-[#444654]">
                <div
                    class="relative text-base gap-4 md:gap-6 m-auto md:max-w-2xl lg:max-w-2xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0">
                    <div class="w-[30px] flex flex-col relative items-end">
                        <div class="relative h-[30px] w-[30px] p-1 rounded-sm text-white flex items-center justify-center">
                            <img src="@/assets/logo.jpg" class="h-6 w-6">
                        </div>
                    </div>
                    <div class=" mt-1 relative flex w-[calc(100%-70px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
                        <div class="markdown">
                            <v-md-editor @copy-code-success="handleCopyCodeSuccess" :model-value="item.content"
                                mode="preview"></v-md-editor>
                        </div>
                    </div>
                </div>
            </div>

            <!-- user -->
            <div v-else
                class="w-full border-0 border-b border-solid border-black/10 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group dark:bg-gray-800">
                <div
                    class="text-base gap-4 md:gap-6 m-auto md:max-w-2xl lg:max-w-2xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0">
                    <div class="w-[30px] flex flex-col relative items-end">
                        <div class="relative flex"><span
                                style="box-sizing: border-box; display: inline-block; overflow: hidden; width: initial; height: initial; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px; position: relative; max-width: 100%;"><img
                                    src="https://s.tuojin.cc/face/3.svg" class="rounded-sm"
                                    style="min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%;"></span>
                        </div>
                    </div>
                    <div class=" mt-1 relative flex w-[calc(100%-50px)] flex-col gap-2 md:gap-3 lg:w-[calc(100%-115px)]">
                        <!---->
                        <div class="flex user flex-grow flex-col gap-3 pt-1">
                            <v-md-editor :model-value="item.content" mode="preview"></v-md-editor>
                        </div>
                    </div>
                </div>
            </div>
        </template>
        <div v-show="askStatus"
            class="w-full border-0 border-b border-solid border-black/10 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group bg-gray-50 dark:bg-[#444654]">
            <div
                class="relative text-base gap-4 md:gap-6 m-auto md:max-w-2xl lg:max-w-2xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0">
                <div class="w-[30px] flex flex-col relative items-end">
                    <div class="relative h-[30px] w-[30px] p-1 rounded-sm text-white flex items-center justify-center">
                        <img src="@/assets/logo.jpg" class="h-6 w-6">
                    </div>
                </div>
                <div class="mt-1 relative flex w-[calc(100%-70px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
                    <div class="markdown priview">
                        <v-md-editor class="nima" :model-value="current" mode="preview"></v-md-editor>
                    </div>
                </div>
            </div>
        </div>
        <div v-if="chatList.length > 0" class="h-96 "></div>
    </div>
</template>

<script lang='ts' setup>
import main from '@/store/index'
import { message } from 'ant-design-vue'
import { storeToRefs } from 'pinia'
const { chatList, askStatus, askContent } = storeToRefs(main())
let current = ref<string>('')
watchEffect(() => {
    current.value =
        askContent.value +
        '<a class=" inline-block align-bottom ml-1 nima w-2 h-6 bg-black transition-opacity"></a>'
})
const handleCopyCodeSuccess = (code: string) => {
    message.success('复制成功!')
}
</script>
<style >
@keyframes cursor-blinks {
    0% {
        opacity: 1;
        display: block;
    }

    50% {
        opacity: 0;
        display: none;
    }

    100% {
        opacity: 1;
        display: block;
    }
}

.nima {
    animation: cursor-blinks 1.2s infinite steps(1, start);
}

/* .vuepress-markdown-body::after {
    content: '|';
    @apply inline-block align-bottom  h-6 text-black transition-opacity;
    animation: cursor-blinks 1.2s infinite steps(1, start);
} */
</style>
<style>
.vuepress-markdown-body:not(.custom) {
    @apply p-0;
    background-color: #f9fafb;
}

.user .vuepress-markdown-body:not(.custom) {
    @apply p-0;
    background-color: #eff2f5;
}
</style>